/**
* @description: 我的
* @author: JiWei
* @date:
**/
<template>
  <view class="mine-home">
    <view class="top-mine">
      <view class="left-img">
        <img src="/static/img/autaor.png" alt="" @click="jump">
      </view>
      <view class="right-user">
        <text class="user-title">{{user}}</text>
        <text class="user-phone">{{phone}}</text>
      </view>
    </view>
    <view class="main-container">
      <van-cell-group class="clear-cache">
        <van-field v-for="(item,index) in options"
                   :label="item.title"
				   :key="index"
                   readonly
                   input-align="right"
                   right-icon="arrow"
                   @click="toSub(item.url)" />
      </van-cell-group>
    </view>
    <tabBar :current="bottomTab" :list="list"></tabBar>
  </view>
</template>
<script>
import tabBar from '../../components/common/tabBar'
export default {
  name: 'mine',
  components: { tabBar },
  props: {},
  data() {
    return {
      bottomTab: 1,
      list:[
        {
          text: "首页", // 页面标题
          icon: require("../../static/img/noSelectHome.png"), //未选中图标
          icon_a: require("../../static/img/selectHome.png"), //选中图片
          path: "/pages/testProject/index",
        },
        {
          text: "我的",
          icon: require("../../static/img/noSelectMine.png"),
          icon_a: require("../../static/img/selectMine.png"),
          path: "/pages/testProject/mine",
        },
      ],
      options: [
        {
          title: "我待办的",
          url: "/pages/testProject/todoTask"
        },
        {
          title: "我完成的",
          url: "/pages/testProject/completedTask"
        }
      ],
      user:'测试',
      phone: 13812341234
    };
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {
    toSub(url) {
      uni.navigateTo({url: url});
    },
    jump() {
      uni.navigateTo({
        url: '/pages/testProject/individualFile'
      })
    }
  }
};
</script>
<style scoped lang="scss">
.mine-home {
  width: 100vw;
  height: 100vh;
  background: #F2F6FA;
  overflow: hidden;
  .top-mine {
    width: 100vw;
    height: px2vh(283);
    background: #417ADC;
    padding-top: px2vh(120);
    color: #fff;
    .left-img {
      width: px2vw(200);
      height: px2vw(200);
      float: left;
      margin-left: px2vw(68);
      img {
        width: px2vw(200);
        height: px2vw(200);
      }
    }
    .right-user {
      width: px2vw(500);
      height: px2vh(170);
      margin-top: px2vh(30);
      margin-left: px2vw(62);
      float: left;
      .user-title {
        display: inline-block;
        width: 100%;
        font-size: px2vw(54);
        margin-bottom: px2vh(46);
      }
      .user-phone {
        font-size: px2vw(36);
      }
    }
  }
}
</style>